<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>裁剪头像</title>
		<script src="html5plus://ready"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/cropper.min.css" />
		<style type="text/css">
			body {
				background-color: #000000;
			}
			
			#quxiao,
			#xuanzhuan,
			#xuanqu {
				font-size: 20px;
			}
			
			.divbut {
				width: 100%;
				text-align: center;
				position: fixed;
				z-index: 2;
				bottom: 0px;
				background-color: #000000;
				height: 7.5%;
				line-height: 50px;
			}
			
			.divbut>div:first-child {
				float: left;
				width: 20%;
			}
			
			.divbut>div:last-child {
				float: right;
				width: 20%;
			}
			
			.holdcenter {
				background-color: #000000;
				height: 93%;
				width: 100%;
				position: absolute;
				text-align: center;
			}
			
			.holdcenter img {
				/*height: 100%;
				width: 100%;*/
				max-width: 100%;
				max-height: 100%;
			}
		</style>
	</head>

	<body>
		<div style="" class="holdcenter">
			<img id="image" src="">
		</div>
		<div class="divbut">
			<div>
				<p id="quxiao" class="iconfont icon-quxiao">取消</p>
			</div>
			<div>
				<p id="xuanqu" class="iconfont icon-queding">确认</p>
			</div>
		</div>
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/my/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/cropper.min.js" type="text/javascript" charset="utf-8"></script>
	</body>
	<script type="text/javascript">
		var self = plus.webview.currentWebview();
		var path = self.path;
		var type = self.type;
		var $image;
		$image = $('.holdcenter > img');
		$image.attr('src', path);
		$image.cropper({
			aspectRatio: 1 / 1,
			minContainerWidth: 200,
			minContainerHeight: 200,
			minCropBoxWidth: 200,
			minCropBoxHeight: 200,
			minCanvasWidth: 400,
			minCanvasHeight: 400,
			cropBoxResizable: true,
			background: false,
			modal: true,
			crop: function(e) {}
		});
		document.getElementById("xuanqu").addEventListener("tap", function() {
			var resImg = $image.cropper('getCroppedCanvas', {
				width: 300,
				height: 300
			});
			var preView = plus.webview.getWebviewById('My');
			mui.fire(preView, 'updateHeadImg', {
				img_path: resImg.toDataURL()
			});
			mui.back()
		});
		document.getElementById("quxiao").addEventListener("tap", function() {
			mui.back()
		})
	</script>

</html>